<script setup>
import {useRouter} from "vue-router";
import {infoStore} from "@/store";
import {onBeforeMount, reactive} from "vue";

const store = infoStore()
const {updateIsLogin} = store
const userRouter = useRouter()
const state = reactive({
    userInfo: [],
})
const backToHome = function () {
    userRouter.push('/')
}

const logout = function () {
    backToHome()
    localStorage.removeItem('cookie')
    localStorage.removeItem('userInfo')
    updateIsLogin(false)
}
onBeforeMount(() => {
    state.userInfo = JSON.parse(localStorage.getItem('userInfo'))
})
</script>

<template>
    <div class="topBar">
        <svg aria-hidden="true" class="icon" @click="backToHome">
            <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <div>{{ state.userInfo.data.profile.nickname }}</div>
        <div class="logout" @click="logout">
            退出
        </div>
    </div>
    <div class="infoContent"><img :src="state.userInfo.data.profile.avatarUrl" alt="" class="profileimg"/></div>
</template>

<style lang="less" scoped>
.topBar {
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
}

.infoContent {
    height: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .profileimg {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
    }
}
</style>